import React, { Component } from 'react';
import { Row, Col, Form, Input, Modal, Switch } from 'antd';

const FormItem = Form.Item;

@Form.create()
export default class AOEForm extends Component {
  componentDidMount() {
    // 组件加载完成后
  }

  // 关闭窗口
  handleCloseForm = () => {
    this.props.dispatch({
      type: 'parameters/updateState',
      payload: {
        modalType: '',
      },
    });
  };

  // 保存
  handleSaveClick = () => {
    const { dispatch, item } = this.props;
    const { getFieldsValue, validateFields } = this.props.form;
    validateFields(errors => {
      if (errors) {
        return;
      }
      const data = {
        ...getFieldsValue(),
        id: item.id,
      };
      data.status = data.status ? '0002' : '0003';
      dispatch({
        type: 'parameters/save',
        payload: data,
      });
    });
  };

  // 渲染界面
  render() {
    const { getFieldDecorator } = this.props.form;
    const { modalType, item } = this.props;
    const cmView = modalType === 'view';

    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 14 },
    };
    const formRowOne = {
      labelCol: { span: 4 },
      wrapperCol: { span: 19 },
    };
    return (
      <Modal
        maskClosable={false}
        cancelText="取消"
        okText="提交"
        onCancel={() => this.handleCloseForm()}
        visible={modalType !== ''}
        width={800}
        onOk={() => this.handleSaveClick()}
        title={modalType === 'create' ? '新增' : modalType === 'edit' ? '编辑' : '查看'}
      >
        <Form>
          {/* 第一行 */}
          <Row>
            <Col span={12}>
              <FormItem label="平台名称" hasFeedback {...formItemLayout}>
                {getFieldDecorator('platformName', {
                  initialValue: item.platformName,
                  validateTrigger: 'onBlur',
                  rules: [{ required: true, message: '请输入园区名称' }],
                })(<Input />)}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="管理员姓名" hasFeedback {...formItemLayout}>
                {getFieldDecorator('adminName', {
                  initialValue: item.adminName,
                  rules: [{ required: true, message: '请输入管理员姓名' }],
                })(<Input />)}
              </FormItem>
            </Col>
          </Row>
          {/* 第三行 */}
          <Row>
            <Col span={12}>
              <FormItem label="客服支持电话" hasFeedback {...formItemLayout}>
                {getFieldDecorator('telephone', {
                  initialValue: item.telephone,
                  rules: [{ message: '请输入客服支持电话' }],
                })(<Input />)}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="客服支持微信" hasFeedback {...formItemLayout}>
                {getFieldDecorator('wechat', {
                  initialValue: item.wechat,
                  rules: [{ message: '请输入客服支持微信' }],
                })(<Input />)}
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span={12}>
              <FormItem label="客服支持邮箱" hasFeedback {...formItemLayout}>
                {getFieldDecorator('email', {
                  initialValue: item.email,
                  rules: [{ message: '请输入客服支持邮箱' }],
                })(<Input />)}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="版权信息" hasFeedback {...formItemLayout}>
                {getFieldDecorator('copyrightInformation', {
                  initialValue: item.copyrightInformation,
                  rules: [{ required: true, message: '请输入版权信息' }],
                })(<Input />)}
              </FormItem>
            </Col>
          </Row>
          <FormItem label="状态" {...formRowOne}>
            {getFieldDecorator('status', {
              valuePropName: 'checked',
              initialValue: item.status !== '0003',
            })(<Switch checkedChildren="启用" unCheckedChildren="停用" />)}
          </FormItem>
          {/* 第四行 */}
          {/* 第五行 */}
          {cmView && (
            <Row>
              <Col span={12}>
                <FormItem label="创建人" {...formItemLayout}>
                  <Input disabled defaultValue={item.description} />
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem label="创建时间" {...formItemLayout}>
                  <Input disabled defaultValue={item.description} />
                </FormItem>
              </Col>
            </Row>
          )}
          {/* 第六行 */}
          {cmView && (
            <Row>
              <Col span={12}>
                <FormItem label="修改人" {...formItemLayout}>
                  <Input disabled defaultValue={item.description} />
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem label="修改时间" {...formItemLayout}>
                  <Input disabled defaultValue={item.description} />
                </FormItem>
              </Col>
            </Row>
          )}
        </Form>
      </Modal>
    );
  }
}
